body {
    perspective: 1000px;
}

section {
    position       : relative;
    width          : 300px;
    height         : 200px;
    margin         : 150px auto;
    transform-style: preserve-3d;
    animation      : rotate 10s linear infinite;
    background     : url(./6.jpg) center/cover no-repeat;

    &:hover {
        animation-play-state: paused;
    }
}

@keyframes rotate {
    0% {
        transform: rotateY(0);
    }

    100% {
        transform: rotateY(360deg);
    }
}

section div {
    position  : absolute;
    top       : 0;
    left      : 0;
    width     : 100%;
    height    : 100%;
    background: url(./6.jpg) center/cover no-repeat;

    &:nth-child(1) {
        transform: translateZ(300px);
    }

    &:nth-child(2) {
        // 先旋转好了，再移动距离
        transform: rotateY(60deg) translateZ(300px);
    }

    &:nth-child(3) {
        // 先旋转好了，再移动距离
        transform: rotateY(120deg) translateZ(300px);
    }

    &:nth-child(4) {
        // 先旋转好了，再移动距离
        transform: rotateY(180deg) translateZ(300px);
    }

    &:nth-child(5) {
        // 先旋转好了，再移动距离
        transform: rotateY(240deg) translateZ(300px);
    }

    &:nth-child(6) {
        // 先旋转好了，再移动距离
        transform: rotateY(300deg) translateZ(300px);
    }
}